<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性(computed)</title>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <h1>姓:<input type="text" v-model="firstName"></h1>
      <h1>名:<input type="text" v-model="lastName"></h1>
      <h1>-----------计算属性---------------</h1>

      <h1>姓名：{{getName}}</h1>
      <h1>全名:<input type="text" v-model="getName"></h1>


      <h1>{{firstName}} {{lastName}}</h1>
      <h1>{{firstName+" "+lastName}}</h1>
      <h1>--------------方法method-------------</h1>
      <h1>{{getFullName()}}</h1>

    </div>
    <script src="../js/vue.js"></script>
    <script>
      /* 
      1.谁在调用computed:vue
      2.计算属性什么时候调用？
        2.1 初次渲染时会调用，
        2.2 当值发生变化时会调用
      3.计算属性的底层用到是setter和getter的方法
      4.与methods相比：
        computed有缓存机制
      */
      const vm = new Vue({
        el: "#app",
        data: {
          message: "你好，世界",
          firstName: "张",
          lastName: "三",
        },
        methods: {
          getFullName: function () {
            return this.firstName + "  " + this.lastName;
          }
        },
        computed: {
          //简写
          /*  getName: function () { //1.计算属性什么时候调用？初次渲染时会调用，当值发生变化时会调用
             // return this.firstName + "   " + this.lastName;
             return 123
           } */
          //完整写法
          getName: {
            set: function (value) {
              // console.log("set 被调用了");
              let arr = value.split("-");
              this.firstName = arr[0];
              this.lastName = arr[1]
            },
            get: function () {
              return this.firstName + "-" + this.lastName
            }
          }
        }
      })
    </script>
  </body>

</html>